<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Poll-tutorial</title>

    <style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 300px;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }

  </style>
</head>
<body>

{{#poll}}
<form method="post" action="/vote">
    <input name="id" value="{{id}}" hidden>
    <table>
        <tr>
            <th colspan="2" style="text-align: center"><h3>Title: {{title}}</h3></th>
        </tr>
        <tr>
            <th colspan="2" style="text-align: center">Question: {{message}}</th>
        </tr>
        <tr>
            <th>
              <div style="text-align: center;">
                    <select name="option">
                        {{#options}}
                        <option value="{{key}}">{{key}}</option>
                        {{/options}}
                    </select>
                </div>
            </th>
            <th style="text-align: center"></th>
        </tr>
        {{#options}}
        <tr>
            <th style="text-align: center">Option: {{key}}</th>
            <th style="text-align: center">Votes: {{value}}</th>
        </tr>
        {{/options}}
        <tr>
            <th style="text-align: center"></th>
            <th style="text-align: center">
                <button>Vote</button>
            </th>
        </tr>
    </table>
</form>

<form method="post" action="/delete">
    <input name="id" value="{{id}}" hidden>
    <button>Delete</button>
</form>
{{/poll}}

</body>
</html>
